<template>
  <div class="layout-wrap">
    <sw-navbar :request="request" :isRequest="isRequest" :title="title" :backgroundColor="backgroundColor" logo="">
      <div slot="right" style="cursor: pointer;" @click="logout">退出</div>
    </sw-navbar>
    <div class="loading-page" v-if="loading">
      <div class="loading-container">
        <div class="loading-content">
          <div class="pageLoading">
            <svg class="gear gear_left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <path id="p" fill="#0E6CCB"
                    d="M94.1 58.8c.6-2.8.9-5.8.9-8.8s-.3-6-.9-8.8l-11.7-.4c-.7-2.6-1.7-5-3-7.3l8-8.5c-3.3-4.9-7.5-9.2-12.5-12.5l-8.5 8c-2.3-1.3-4.7-2.3-7.3-3l-.3-11.6C56 5.3 53 5 50 5s-6 .3-8.8.9l-.4 11.7c-2.6.7-5 1.7-7.3 3l-8.5-8c-4.9 3.3-9.2 7.5-12.5 12.5l8 8.5c-1.3 2.3-2.3 4.7-3 7.3l-11.6.3C5.3 44 5 47 5 50s.3 6 .9 8.8l11.7.4c.7 2.6 1.7 5 3 7.3l-8 8.5c3.3 4.9 7.5 9.2 12.5 12.5l8.5-8c2.3 1.3 4.7 2.3 7.3 3l.4 11.7c2.7.5 5.7.8 8.7.8s6-.3 8.8-.9l.4-11.7c2.6-.7 5-1.7 7.3-3l8.5 8c4.9-3.3 9.2-7.5 12.5-12.5l-8-8.5c1.3-2.3 2.3-4.7 3-7.3l11.6-.3zM50 66.9c-9.3 0-16.9-7.6-16.9-16.9S40.7 33.1 50 33.1 66.9 40.7 66.9 50 59.3 66.9 50 66.9z">
              </path>
            </svg>
            <svg class="gear gear_right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <use href="#p">
                <path id="p" fill="#0E6CCB"
                      d="M94.1 58.8c.6-2.8.9-5.8.9-8.8s-.3-6-.9-8.8l-11.7-.4c-.7-2.6-1.7-5-3-7.3l8-8.5c-3.3-4.9-7.5-9.2-12.5-12.5l-8.5 8c-2.3-1.3-4.7-2.3-7.3-3l-.3-11.6C56 5.3 53 5 50 5s-6 .3-8.8.9l-.4 11.7c-2.6.7-5 1.7-7.3 3l-8.5-8c-4.9 3.3-9.2 7.5-12.5 12.5l8 8.5c-1.3 2.3-2.3 4.7-3 7.3l-11.6.3C5.3 44 5 47 5 50s.3 6 .9 8.8l11.7.4c.7 2.6 1.7 5 3 7.3l-8 8.5c3.3 4.9 7.5 9.2 12.5 12.5l8.5-8c2.3 1.3 4.7 2.3 7.3 3l.4 11.7c2.7.5 5.7.8 8.7.8s6-.3 8.8-.9l.4-11.7c2.6-.7 5-1.7 7.3-3l8.5 8c4.9-3.3 9.2-7.5 12.5-12.5l-8-8.5c1.3-2.3 2.3-4.7 3-7.3l11.6-.3zM50 66.9c-9.3 0-16.9-7.6-16.9-16.9S40.7 33.1 50 33.1 66.9 40.7 66.9 50 59.3 66.9 50 66.9z">
                </path>
              </use>
            </svg>
            <div class="text">系统加载中...</div>
          </div>
        </div>
      </div>
    </div>
    <router-view v-if="isRouterAlive"></router-view>
    <sw-footer :is-request="isRequest" :request="request" :backgroundColor="backgroundColor" copy-right=""></sw-footer>
  </div>
</template>

<script>
import mixinPortal from '@/layouts/mixin.portal'
import { mapMutations } from 'vuex'
export default {
  name: 'Layout',
  mixins: [
    mixinPortal
  ],
  data(){
    return{
      loading: true, //系统加载中
      isRouterAlive: false,
    }
  },
  created(){
    // this.getUserInfo()
  },
  computed: {},
  methods: {
    ...mapMutations({
      setUserInfo: 'setUserInfo',
    }),
    // 通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      })
    },
    getUserInfo(){
      this.loading = true
      this.isRouterAlive = false;
      this.$api.getUserInfo().then(res => {
        this.setUserInfo(res.data)
      }).finally(() => {
        this.loading = false
        this.reload()
      })
    },
    logout() {
      localStorage.clear()
      sessionStorage.clear()
      window.location = `${serverConfig.AUTH_CAS}/logout?service=${window.location.origin}/ui/`
    }
  }
}
</script>

<style lang="scss">
@import "/src/assets/scss/base.scss";
.layout-wrap {
  width: 100vw;
  height: 100vh;
  background: $bg-color;
  overflow-x: hidden;

  .loading-page {
    width: 100%;
    min-height: calc(100 vh- 100px);
    background: #f5f7f9;

    .loading-container {
      @include center-container;
      padding: 20px 0 20px;
      box-sizing: border-box;

      .loading-content {
        width: 100%;
        height: calc(100vh - 140px);
        border-radius: 1px;
        overflow: hidden;

        .pageLoading {
          position: relative;
          vertical-align: middle;
          text-align: center !important;
          white-space: normal;
          display: inline-block;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          .gear {
            position: absolute;
            left: calc(50% - 59px);
            top: 0;
            width: 64px;
            height: 64px;
          }

          .gear_left {
            margin: 0;
            animation: loading 3s linear infinite;
          }

          .gear_right {
            left: calc(50% - 59px + 52px);
            top: 32px;
            animation: loading 3s linear infinite;
            animation-direction: reverse;
          }

          @keyframes loading {
            100% {
              transform: rotate(360deg);
            }
          }

          .text {
            font-weight: 700 !important;
            color: #0E6CCB;
            font-size: 20px;
            margin-top: 116px;
          }
        }
      }
    }
  }
}
</style>
